<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>snake-贪吃蛇</title>
    <style>
        .snake-box {
            width: 700px;
            height: 700px;
            margin: 0 auto;
            border: 1px solid #ccc;
            position: relative;
        }

        .snake {
            width: 25px;
            height: 25px;
            background: #3f3e3e;
            position: absolute;
            top: 350px;
            left: 350px;
            transition: all .1s;
            z-index: 10;
        }

        .item {
            width: 0;
            height: 0;
            position: absolute;
            background-color: #83aa29;
            transition: all 200ms;
        }
        .score {
            width: 700px;
            margin: 0 auto;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="score">得分:<span id="score" style="color: #ff3333;">0</span></div>
<div class="snake-box">
    <div class="snake"></div>
</div>

<script src="js/vendor/event.js"></script>
<script src="js/element.js"></script>
<script>
    var D_FLAG = {
        LEFT: 37,
        UP: 38,
        RIGHT: 39,
        DOWN: 40
    };
    var box = null;
    var snake = null;
    var directionFlag = D_FLAG.RIGHT;
    var time = null;
    var itemList = {};
    var score = 0;
    $(document).ready(function () {
        box = $('.snake-box');
        snake = $('.snake');
        $(document).on('keyup', actionSnake);
        time = setInterval(function () {
            createItem();
        }, 1000);

        time = setInterval(function () {
            moveSnake();
        }, 500);
    });

    function createItem() {
        var left = randomCoordinate();
        var top = randomCoordinate();
        var div = document.createElement('div');
        div.className = 'item';
        div.style.left = left + 'px';
        div.style.top = top + 'px';
        div.style.width = '25px';
        div.style.height = '25px';
        box.object.appendChild(div);
        var key = randomStr(32);
        itemList[key] = {
            left: left,
            top: top,
            right: left + 25,
            bottom: top + 25,
            score: 1,
            $el: div
        };
//        setTimeout(function () {
//            div.remove();
//            delete itemList[key];
//        }, 10000);
    }

    function randomCoordinate() {
        return Math.floor(Math.random() * 28) * 25;
    }

    function actionSnake(e) {
        var k = e.pressKey();

        for (var index in D_FLAG) {
            if (D_FLAG[index] === k) {
                directionFlag = D_FLAG[index];
            }
        }
    }

    function moveSnake() {
        var left = snake.left();
        var top = snake.top();
        if (left >= 675 || top >= 675 || left <= 0 || top <= 0) {
            gameOver();
            return;
        }

        if (directionFlag === D_FLAG.RIGHT) {
            left += 25;
        } else if (directionFlag === D_FLAG.UP) {
            top -= 25;
        } else if (directionFlag === D_FLAG.LEFT) {
            left -= 25;
        } else if (directionFlag === D_FLAG.DOWN) {
            top += 25;
        }
        snake.top(top);
        snake.left(left);

        for (var key in itemList) {
            if (left === itemList[key].left && top === itemList[key].top) {
                itemList[key].$el.remove();
                score += itemList[key].score;
            }
        }

        $('#score').text(score);
    }

    function gameOver() {
        clearInterval(time);
        alert('Game Over');

    }

    function randomStr(max) {
        var str = 'ABCDEFGHTJKNMLOPQRSTUVWXYZabcdefjhijknmlopqrstuvwxyz';
        var rStr = '';
        for (var i = 0; i < max; i++) {
            var index = Math.floor(Math.random() * str.length);
            rStr += str[index];
        }
        return rStr;
    }

</script>
</body>
</html>